import React from 'react';
import {Link} from 'react-router';
import config from '../../config';
import {getItem, setItem, formatDateBetween, isWeiXin} from '../../utils';
import {
    FOLLOW_ROOM,
    CANCEL_FOLLOW_ROOM,
    FETCH_ROOM_FANS_LIST,
    FETCH_ACT_LIST
} from '../../constants/actTypes'
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import Avatar from '../../components/Avatar/Avatar';
import Panel from '../../components/Panel/Panel';
import Price from '../../components/Price/Price';
import InfiniteScroll from '../../components/InfiniteScroll/InfiniteScroll';


/**
 * 加载样式或图片文件
 * */
import './sass/sponsor.scss';
import defaultAvatar from'../_common_img/sponsor/head.png';

// import 'antd/lib/tabs/style/index.less';

class Sponsor extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.handleFollow = this.handleFollow.bind(this);
        this.handleCancelFollow = this.handleCancelFollow.bind(this);
        this.actLoadFunc = this.actLoadFunc.bind(this);
        this.fansLoadFunc = this.fansLoadFunc.bind(this);
        this.goLogin = this.goLogin.bind(this);
        this.state = {
            sponsor: {},
            curStatus: 0,

            actList: [],
            actIsEnd: false,
            actIsLoading: false,
            actIsNoData: false,
            actPage: 0,
            actSize: 10,

            fansList: [],
            fansIsEnd: false,
            fansIsLoading: false,
            fansIsNoData: false,
            fansPage: 0,
            fansSize: 10
        };
    }

    componentWillMount() {
        const {actions, location, act} = this.props;
        let roomId = location.query.id;
        actions.fetchRoomInfo({roomId: roomId}).then(res => {
            if (res.data.code === 20000) {
                this.setState({
                    sponsor: res.data.data
                })
            }
        });
        this.actLoadFunc();
        this.fansLoadFunc();
    }

    actLoadFunc() {
        const {actions, location} = this.props;
        let roomId = location.query.id;
        this.setState({
            actIsLoading: true,
            actPage: this.state.actPage + 1
        }, () => {
            actions.fetchActList(
                {
                    page: this.state.actPage,
                    size: this.state.actSize,
                    roomId: roomId

                }).then(response => {
                if (response.type === FETCH_ACT_LIST) {
                    if (response.actList.length === 0 && this.state.actPage === 1) {
                        // 没有数据
                        this.setState({actIsNoData: true});
                    } else if (response.actList.length < this.state.actSize) {
                        // 没有更多数据
                        this.setState({actIsEnd: true});
                    }
                    this.setState({
                        actList: [...this.state.actList, ...response.actList],
                        actIsLoading: false
                    });
                }
            });
        });
    }

    fansLoadFunc() {
        const {actions, location} = this.props;
        let roomId = location.query.id;
        this.setState({
            fansIsLoading: true,
            fansPage: this.state.fansPage + 1
        }, () => {
            actions.fetchRoomFans(
                {
                    page: this.state.fansPage,
                    size: this.state.fansSize,
                    roomId: roomId

                }).then(response => {
                if (response.type === FETCH_ROOM_FANS_LIST) {
                    if (response.code === 20000) {
                        if (response.fansList.length === 0 && this.state.fansPage === 1) {
                            // 没有数据
                            this.setState({fansIsNoData: true});
                        } else if (response.fansList.length < this.state.fansSize) {
                            // 没有更多数据
                            this.setState({fansIsEnd: true});
                        }
                        this.setState({
                            fansList: [...this.state.fansList, ...response.fansList],
                            fansIsLoading: false
                        });
                    } else {
                        alert(response.code);
                    }

                }
            });
        });
    }

    handleChangeTab(index) {
        this.setState({
            curStatus: index
        })
    }

    handleFollow() {
        const {actions, location} = this.props;
        actions.followRoom({roomId: location.query.id}).then(res => {
            if (res.type === FOLLOW_ROOM) {
                if (res.data.code === 20000) {
                    this.setState({
                        sponsor: {
                            ...this.state.sponsor,
                            isFollow: 1
                        }
                    });
                } else if (res.data.code === 40001) {
                    alert(res.data.message);
                    isWeiXin() ? window.location.href = config.SERVICE_URL + '/api/wechat/authorize?url=' + escape(config.JUMP_URL + '/#/login') : '';
                    // this.context.router.push({
                    //     pathname: "/login"
                    // })
                } else {
                    alert(res.data.message)
                }
            }
        })
    }

    handleCancelFollow() {
        const {actions, location} = this.props;
        actions.cancelFollowRoom({roomId: location.query.id}).then(res => {
            if (res.type === CANCEL_FOLLOW_ROOM) {
                if (res.data.code === 20000) {
                    this.setState({
                        sponsor: {
                            ...this.state.sponsor,
                            isFollow: 0
                        }
                    });
                    // console.log('取消关注成功');
                }
            }
        })
    }

    goLogin() {
        const {location} = this.props;
        setItem('NEXT_URL', '/sponsor?id=' + location.query.id);
        // window.location.href = config.SERVICE_URL+'/api/wechat/authorize?url='+escape(config.JUMP_URL+'/#/login');
        this.context.router.push({
            pathname: '/login'
        })
    }

    render() {
        const {act} = this.props;
        let sponsor = this.state.sponsor;
        let actList = this.state.actList;
        let fansList = this.state.fansList;
        return (
            <MainSection className="sponsor" title="主办方主页">

                <div className="sponsor-head">
                    {
                        sponsor.image && <img src={sponsor.image + "?imageView2/1/w/750/h/300"}  alt="" className="wall-bg"/>
                    }
                    <Avatar src={sponsor.avatar} isVip={true}/>
                    <div className="sponsor-name">
                        <h5>{sponsor.name}</h5>
                        <i className={"follow-btn " + (sponsor.isFollow ? 'followed' : '')}
                           onClick={(sponsor.isFollow) ? this.handleCancelFollow : this.handleFollow}/>

                    </div>
                </div>
                <div className="sponsor-body">
                    <div className="tab-btn">

                        <span key="0" className={"tab-item " + (this.state.curStatus === 0 ? "cur" : "")}
                              onClick={this.handleChangeTab.bind(this, 0)}>主页</span>
                        <span key="1" className={"tab-item " + (this.state.curStatus === 1 ? "cur" : "")}
                              onClick={this.handleChangeTab.bind(this, 1)}>活动 {sponsor.activityAmount}</span>
                        <span key="2" className={"tab-item " + (this.state.curStatus === 2 ? "cur" : "")}
                              onClick={this.handleChangeTab.bind(this, 2)}>粉丝 {sponsor.followerAmount}</span>

                    </div>
                    <div className="tab-content">
                        <div className={this.state.curStatus === 0 ? "home-page" : "hide"}>
                            <Panel title="简介">
                                {
                                    sponsor.intro
                                }
                            </Panel>
                            <Panel title="地址">
                                {
                                    sponsor.location
                                }
                            </Panel>
                            <Panel title="相册"  className="photo-list">
                                {
                                    sponsor.album ? sponsor.album.split(',').map((item, index) => {
                                        return (
                                            index < 3 ? (
                                                <Link key={index} to="/sponsor/photo">
                                                    <img src={item + '?imageView2/1/w/200/h/200'} alt=""/>
                                                </Link>
                                            ) : null
                                        )
                                    }) : <div className="color-9">暂无照片</div>
                                }
                            </Panel>
                        </div>
                        <div className={this.state.curStatus === 1 ? "act-list" : "hide"}>
                            <InfiniteScroll
                                loadFunc={this.actLoadFunc}
                                isEnd={this.state.actIsEnd}
                                isLoading={this.state.actIsLoading}
                                isNoData={this.state.actIsNoData}>
                                <ul>
                                    {
                                        actList.map((item, index) => {
                                            return (
                                                <li key={index}>
                                                    <Link className="act-body" to={"/activityList/" + item.id}>
                                                        <img src={item.image} alt=""/>
                                                        <div className="text">
                                                            <h5>{item.name}</h5>
                                                            <p className="address">{item.location}</p>
                                                            <p className="time">{formatDateBetween(item.startTime, item.endTime, true)}</p>
                                                            {
                                                                item.type === 101 ? (
                                                                    <p className="price-box color-9">
                                                                        <Price num={item.price}/>
                                                                        <em>/儿童</em>
                                                                    </p>
                                                                ) : (
                                                                    <p className="price-box color-9">
                                                                        <Price num={item.point} isScore={true}/>
                                                                        <em>/儿童</em>
                                                                    </p>
                                                                )
                                                            }
                                                        </div>
                                                        <div
                                                            className={"status style" + (item.status)}>{config.ACTIVITY_STATUS[item.status]}</div>
                                                    </Link>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                            </InfiniteScroll>
                        </div>

                        <div className={this.state.curStatus === 2 ? "" : "hide"}>
                            {

                                <InfiniteScroll
                                    loadFunc={this.fansLoadFunc}
                                    isEnd={this.state.fansIsEnd}
                                    isLoading={this.state.fansIsLoading}
                                    isNoData={this.state.fansIsNoData}>
                                    <ul className="fans-list">
                                        {
                                            fansList.map((item, index) => {
                                                return (
                                                    <li key={index}>
                                                        <Avatar src={item.avatar}/>
                                                        <div className="info">
                                                            <h5>{item.name}</h5>
                                                            <p>关注: <em>{item.followerAmount}</em> 参与活动:
                                                                <em>{item.activityAmount}</em></p>
                                                        </div>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </InfiniteScroll>
                            }
                        </div>
                    </div>
                </div>


            </MainSection>
        );
    }
}

export default Sponsor;